
//定时
var timerSave = 1000;
var stopsave = 0;
var startdrag = 0;
var canvasContent;
//布局历史
var layouthistory;

$(document).ready(function() {
    var iframe = $('#ViewIframe')[0];
    canvasContent = iframe.contentWindow.document.body;
    $(".lgiRow,.lgiBtn,.lgiHeadDiv").draggable({
        revert: "invalid", // 如果不在有效的droppable上放下，则回弹
        revertDuration: 0, // 回弹动画的持续时间，设为0则立即回弹
        containment: ".canvasContent",
        //拖动时，克隆
        helper: "clone",
        //拖动组件的拖动把手
        handle: ".drag",
        //禁止iframe一直获取到拖动动作，防止卡死
        iframeFix: true,
        //拖动到画布
        // connectToSortable: "",
        placeholder: "ui-state-highlight", // 可选的占位符样式
        start: function (e, t) {
            if (!startdrag) stopsave++;
            startdrag = 1;
        },
        drag: function (e, t) {
            //拖动时，克隆
            //这个虚拟组件宽400px
            t.helper.width(400)
        },
        stop: function (event, ui) {
            if(stopsave>0) stopsave--;
            startdrag = 0;
            //console.log(ui)
            // 确保iframe已经加载完成
            if (iframe.contentWindow && iframe.contentWindow.document) {
                // 复制原始元素（而不是 helper），并追加到 .canvasContent 中
                const $viewContent = $(this).find('.view').find('*');
                let $clonedViewContent = $viewContent.clone(); // 克隆并显示 .view;
                if ($clonedViewContent.length) {
                    $clonedViewContent.show()
                }
                // 生成id
                let r_id = 'view-' + new Date().getTime()
                $clonedViewContent.attr('id', r_id);

                //console.log($clonedViewContent)
                // 将内容追加到iframe的body中
                iframe.contentWindow.document.body.innerHTML += $clonedViewContent[0].outerHTML;
                //获取$clonedViewContent的class名称
                let className = $clonedViewContent[0].className;
                console.log(className)
                let parts = className.split(' '); // 使用空格作为分隔符
                // 使用map处理每个部分，除了第一个外，前面都加上空格
                //let processedParts = parts.map((part, index) => index === 0 ? ' .' + part : ' , .' + part);
                // 使用map处理每个部分，除了最后一个外，前面都加上' , .'
                let processedParts = parts.map((part, index, array) => {
                    //如果是空格，则不处理
                    if (part === " " || part === ""){
                        return '';
                    }
                    // 第一个元素不需要加，
                    if (index === 0) {
                        return ' .' + part;
                    } else {
                        return ' , .' + part;
                    }
                });
                // 使用join方法将处理后的部分重新组合
                let combinedStr = processedParts.join('');
                console.log(combinedStr)
                let firstPart = parts[0]; // 获取第一个部分
                //触发iframe事件，把这个组件加上一个点击监听
                iframe.contentWindow.postMessage({type:'addClickListener',viewId:r_id}, '*');
                //判断div名称是否包含view-row
                if(className.indexOf('view-div') !== -1){
                    console.log('view-div')
                    //把表格元素可作为容器
                    iframe.contentWindow.$('.view-row').sortable({
                        //选择页面上所有 .drag-view 类下的 .column 类的元素，并初始化它们为可排序的。
                        opacity: .35,//拖动时，透明度
                        connectToSortable: ".main-view",
                        placeholder : "ui-state-highlight",
                        start: function(e,ui) {
                            ui.helper.width(400);
                            if (!startdrag) stopsave++;
                            startdrag = 1;
                        },
                        drag: function(e, t) {

                        },
                        stop: function(e,t) {
                            if(stopsave>0) stopsave--;
                            startdrag = 0;
                        }
                    }).disableSelection();
                    //把表格元素可作为容器
                    iframe.contentWindow.$('.view-col').sortable({
                        //选择页面上所有 .drag-view 类下的 .column 类的元素，并初始化它们为可排序的。
                        opacity: .35,//拖动时，透明度
                        connectToSortable: ".main-view",
                        placeholder : "ui-state-highlight",
                        start: function(e,ui) {
                            ui.helper.width(400);
                            if (!startdrag) stopsave++;
                            startdrag = 1;
                        },
                        drag: function(e, t) {

                        },
                        stop: function(e,t) {
                            if(stopsave>0) stopsave--;
                            startdrag = 0;
                        }
                    }).disableSelection();
                    //绑定元素拖动
                    iframe.contentWindow.$('.main-view').sortable({
                        opacity: .35,
                        connectWith: ".view-div",
                        placeholder : "ui-state-highlight",
                        start: function(e,ui) {
                            ui.helper.width(400);
                            if (!startdrag) stopsave++;
                            startdrag = 1;
                        },
                        stop: function(e,t) {
                            if(stopsave>0) stopsave--;
                            startdrag = 0;
                        },
                        receive: function(event, ui) {
                        }
                    }).disableSelection();
                }else{
                    console.log("加入拖拽:{}",firstPart)
                    //使这个iframe里面的元素可以拖拽，并且是表格排序
                    iframe.contentWindow.$(firstPart).sortable({
                        opacity: .35,//拖动时，透明度
                        connectToSortable: ".main-view",
                        placeholder : "ui-state-highlight",
                        start: function() {
                            if (!startdrag) stopsave++;
                            startdrag = 1;
                            console.log("start")
                        },
                        drag: function() {
                            console.log("start")
                        },
                        stop: function() {
                            if(stopsave>0) stopsave--;
                            startdrag = 0;
                            console.log("start")
                        }
                    });
                    // initContainer(iframe,firstPart)
                }
            }
        }
    })
    //定时存储布局
    setInterval(function() {
        handleSaveLayout()
    }, timerSave)
    //主页面监听，iframe传递的消息
    window.addEventListener('message', function(event) {
        // 出于安全考虑，请始终验证消息的来源
        // if (event.origin !== 'https://expected-iframe-origin.com') { // 将此 URL 替换为 iframe 的实际来源
        //     return;
        // }
        // console.log(event.data)
        if (event.data.type === 'div-clicked') {
            // 处理从 iframe 接收到的数据
            console.log('div clicked:', event.data);
            //然后在这里给它渲染一个边框根据索引
            // iframe.contentWindow.$('.'+event.data.className).css('border','1px solid red');
            // 使用 jQuery 在 iframe 的内容中查找元素并添加边框
            var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
            let clickableDivs = iframeDoc.getElementById(event.data.divId);
            console.log(clickableDivs)
            if (clickableDivs) {
                let viewDivs = iframeDoc.querySelectorAll('div[id^="view-"]');
                // 为每个选中的div元素添加点击监听器
                viewDivs.forEach(function(div) {
                    div.classList.remove('view-div-ui-selected');
                })
                // 找到特定的 div 并添加样式
                clickableDivs.classList.add('view-div-ui-selected');
                //数据绑定
                bindClassName(clickableDivs)
            } else {
                console.log('没有找到具有指定 ID 的元素');
            }
        }
    }, false);
});

//绑定div类名到输入框
function bindClassName(div){
    //获取页面id为input-class-name的输入框
    let inputClassName = $('#input-class-name')[0];
    if(inputClassName){
        let className = div.className;
        // 去除view-div-ui-selected
        className = className.replace('view-div-ui-selected', '');
        className = className.replace('view-div', '');
        className = className.replace('ui-sortable-handle', '');
        inputClassName.value = className;
    }
}

//给元素都加上拖动
function initContainer(iframe, className){
    //绑定元素拖动
    iframe.contentWindow.$('.'+className).sortable({
        opacity: .35,
        connectToSortable: "",
        placeholder : "ui-state-highlight",
        start: function(e,ui) {
            if (!startdrag) stopsave++;
            startdrag = 1;
            ui.helper.width(400);
        },
        stop: function(e,t) {
            if(stopsave>0) stopsave--;
            startdrag = 0;

        },
        receive: function(event, ui) {

        }
    }).disableSelection();

}

//是否支持存储，这个是用来保存每一步的
function supportstorage() {
    return typeof window.localStorage == 'object';
}
//句柄保存布局
function handleSaveLayout() {
    let iframe = $('#ViewIframe')[0];
    //获取画布div
    const e = iframe.contentWindow.document.body.innerHTML;
    // console.log(e)
    //如果没有保存，并且当前布局和保存的布局不同
    if (!stopsave && e !== window.canvasContent) {
        console.log("布局已保存")
        //e != window.drag-viewHtml：当前从.drag-view元素中获取的HTML内容（存储在e中）必须与存储在window.drag-viewHtml中的HTML内容不同。
        //更新状态和变量：
        stopsave++;
        window.canvasContent = e;
        //console.log("保存布局到本地-->"+e)
        saveLayout();
        stopsave--;
    }
}
//保存布局
function saveLayout(){
    //获取布局历史
    let data = layouthistory;
    //如果没有历史，则创建一个空的对象
    if (!data) {
        data={};
        data.count = 0;
        data.list = [];
    }
    //删除多余的历史
    if (data.list.length>data.count) {
        for (let i=data.count;i<data.list.length;i++)
            data.list[i]=null;
    }
    //将当前布局添加到历史列表中
    data.list[data.count] = window.canvasContent;
    //更新历史计数
    data.count++;
    //是否可以保存数据到本地，如果可以，则保存到本地
    if (supportstorage()) {
        //console.log("保存布局到本地-->"+JSON.stringify(data));
        localStorage.setItem("layoutdata",JSON.stringify(data));
    }
    //更新全局变量
    layouthistory = data;
}
//恢复布局
function redoLayout() {
    const data = layouthistory;
    if (data) {
        if (data.list[data.count]) {
            window.canvasContent = data.list[data.count];
            data.count++;
            //更新iframe的内容
            const iframe = $('#ViewIframe')[0];
            iframe.contentWindow.document.body.innerHTML = window.canvasContent;
            // $('.canvasContent').html(window.canvasContent);
            if (supportstorage()) {
                localStorage.setItem("layoutdata",JSON.stringify(data));
            }
            return true;
        }
    }
    return false;
}
//撤销布局
function undoLayout() {
    const data = layouthistory;
    // console.log(data);
    if (data) {
        //如果当前历史计数小于2，则不能撤销
        if (data.count<2) return false;
        //更新当前历史计数
        window.canvasContent = data.list[data.count-2];
        data.count--;
        //更新iframe的内容
        const iframe = $('#ViewIframe')[0];
        iframe.contentWindow.document.body.innerHTML = window.canvasContent;
        if (supportstorage()) {
            localStorage.setItem("layoutdata",JSON.stringify(data));
        }
        return true;
    }
    return false;
}
